﻿
<template>
  <div class="Letter_man_contain" ref="Detail_Excahnge_contain">
      <div class="Letter_man_contain_header">
        派信员页面
      </div>   
      <div class="letter_msg">
            <div class="letter_msg_box_left">
              <ul>
                <li>
                  学校：华师
                </li>
                <li>
                  宿舍：东九区320
                </li>
                <li>联系方式：13760707405</li>
                <li>负责范围：东栋10楼</li>
              </ul>
            </div>
            <div class="letter_msg_box_right">
               <div class="letter_msg_box_right_header clearfix">
                 <img src="../../../../static/img/bg_all.png" class="letter_msg_img" />
                 <ul class="letter_msg_box_list">
                   <li>
                     名字：王老梁
                   </li>
                   <li>
                     ID:XYZSDSA
                   </li>
                 </ul>
               </div>
               <div class="letter_msg_box_right_bot">
                    派送次数：12345次
               </div>
            </div>
      </div>
    
  </div>
    
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';


export default {
  name: 'Detail_Exchange',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show:this.$store.getters.get_layer_show
    }
  },
  mounted: function () { 
  //  let myScroll = new IScroll('#wrapper2');
   // limit_scroll(this.$refs.el, this.$refs.Detail_Excahnge_contain);
  },
  methods: {
    hide_detail: function () {
      window.removeEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      });
      this.$emit('hide_detail')
    }
  },
  components: {
  }
}
</script>
<style scoped>
  .alre_btn {
    width: 4rem;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #e54d4c;
    color:#fff;
    text-align:center;
    font-size:0.7rem;
    float:right;
    color:#fff;
    border-radius:1vw;
    margin-top:0.15rem;
    margin-right:3%;
  } 
  .select_box {
    width: 97%;
    margin: 0 auto;
    border-radius: 1vw;
    border: 1px solid #b4b4b4;
    background-color:#fff;
  }
  .select_box_header {
    height: 1.55rem;
    line-height: 1.55rem;
  } 
  .select_box_header_left {
    float: left;
    font-size: 0.6rem;
    color: #9f5c2f;
    margin-left:3%;
  } 
  .select_box_header {
  } 
  .select_btn_wrap .sel_act {
    transform: rotate(180deg) translateY(50%);
  } 
  .select_btn_wrap img {
    display: block;
    width: 3vw;
    position: absolute;
    top: 50%;
    right: 24%;
    transform: translateY(-50%)
  }
  .select_btn_wrap li {
    width: 50vw;
    position:relative;
    text-align: center;
    height: 1.7rem;
    line-height: 1.7rem;
    font-size: 0.7rem;
    background-color: #fff;
    border-bottom: 2px solid #b7b7b7;
  }
  .select_btn_wrap {
    color: #b8b8b8;
    display: flex;
    justify-content:space-around;
  } 
  .Letter_man_contain {
    background-color: #eee;
  } 
  .letter_man_nav .act {
    background-color: #9f5c2f;
    color: #fff;
    justify-content: space-between;
  }
  .letter_man_nav li{
    background-color:#fff;
    display:block;
    vertical-align:bottom;
    width: 49vw;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: 0.7rem;
    text-align: center;
    color:#9f5c2f;
    border:1vw #9f5c2f solid;
  } 
  .letter_man_nav {
    margin-top:0.4rem;
    display: flex;
  } 
  .letter_msg_box_right_bot {
  } 
  .letter_msg_box_right_bot {
    margin-top:0.9rem;
    width: 40vw;
    height: 1.325rem;
    border: 2px solid #9f5c2f;
    border-radius: 1vw;
    font-size:0.7rem;
    line-height:1.8;
    color:#9f5c2f;
    text-align:center;
  } 
  .letter_msg_img {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 2vw;
    float: left;
    margin-right: 2vw;
  } 
  .letter_msg_box_list {
    float:left;
    //margin-bottom:2rem;
    font-size: 0.7rem;
    color: #9f5c2f;
    line-height: 1.2;
  }
  .letter_msg_box_list li:nth-child(1){
    margin-bottom:0.6rem;
  } 
  .letter_msg_box_right {
    width: 50%;
    padding-top:0.3rem;
  } 
  .letter_msg_box_left {
    width: 50%;
    font-size: 0.7rem;
    line-height: 1.8;
    text-align: left;
    color: #9f5c2f;
    padding-top: 0.3rem;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 0.1rem;
  } 
  .letter_msg {
    display: flex;
  }
  .letter_msg_box_left {
    width: 50%;
    float: left;
  } 
  letter_msg_box_right{
    float:left;
    width:50%;
  }
  .letter_msg {
    width: 93%;
    height: 5.35rem;
    background-color: #fff;
    box-shadow: 2px 2px 4px 2px rgba(128, 128, 128, 0.33);
    border-radius: 1vw;
    margin: 0.65rem auto 0;
  } 
  .Letter_man_contain_header {
    font-size: 0.9rem;
    text-align: center;
    height: 2.2rem;
    line-height: 2.2rem;
    letter-spacing: 1px;
    background-color: #9f5c2f;
    color: #fff;
  }

</style>